<template>
	<view class="news-item margin-top-sm " @click="onDetail(options.id)">
		<view v-if="index === 0" hover-class="hover-class">
			<image class="news-item_cover-big" v-if="options.indexImg.slice(0,1)=='/'" :src="imgURL+options.indexImg" mode="aspectFill">
			</image>
			<view class="margin-left-xs margin-top-xs">
				<view class="text-overhidden-2">{{ options.artName }}</view>
				<view class="text-sm margin-top-xs ">
					<text>{{ options.createTime }}</text>
					<text class="margin-left-xs">{{ options.author }}</text>
				</view>
			</view>
		</view>
		<view v-else class="flex-row" hover-class="hover-class">
			<view>
				<image class="news-item_cover" v-if="options.indexImg.slice(0,1)=='/'" :src="imgURL+options.indexImg">
				</image>
			</view>
			<view class="margin-left-xs">
				<view class="text-overhidden-2">{{ options.artName }}</view>
				<view class="text-sm margin-top-xs ">
					<text>{{ options.createTime }}</text>
					<text class="margin-left-xs">{{ options.author }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { imgURL } from '@/api/request';
	defineProps({
		options: {
			required: true,
			type: Object,
			default() {
				return {}
			}
		},
		index: {
			type: Number,
			default: 0
		}
	})
	
	const onDetail = (id: string) =>{
		uni.navigateTo({
			url: `/pages/message/detail?id=${id}`
		})
	}
</script>

<style scoped lang="scss">
.news-item {
	&_cover-big {
		height: 300rpx;
		width: 100%;
		border-radius: 16rpx;
	}
	&_cover {
		width: 240rpx;
		height: 140rpx;
		border-radius: 16rpx;
	}
}
</style>